<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="IT技术课程网站后台管理系统登录">
		<meta name="keywords" content="IT技术课程网站后台管理系统登录">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="images/favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
		<title>网站后台管理系统登录</title>
		<!-- 第一种方式:<base> 标签为页面上的所有链接规定默认地址或默认目标 -->
		<base th:href="@{/}">
		<!--[if lt IE 9]>
		  <script src="js/html5shiv.min.js"></script>
		  <script src="js/respond.min.js"></script>
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap3.min.css">
		<style type="text/css">
			#leftContent {
				display: block;
				float: left;
				width: 50%;
				height: 100vh;
				background: url(images/20180823193158_jytpq.jpg) no-repeat fixed;
				background-size: 50% auto;
			}

			.leftcont {
				width: 100%;
				height: 100vh;
				background-color: rgba(0, 0, 0, .5);
				margin: 0
			}

			.leftcont h1 {
				color: #eee;
				text-align: center;
				margin: 0;
				width: 300px;
			}

			.leftcont img {
				width: 40px;
			}

			#rightContent {
				display: block;
				float: right;
				background-color: #fefefe;
				width: 50%;
				height: 100vh;
				padding: 50px;
			}

			.form-login {
				display: block;
				width: 70%;
				padding: 20px;
				margin-left: 15%;
				border: 0.0625rem solid #aaa;
				border-radius: 10px;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</head>

	<body>
		<div id="wrap">
			<div id="leftContent">
				<div class="row leftcont">
					<div class="col-lg-1 col-lg-offset-2" style="margin-top: 15vh;padding-left: 30px;padding-right: 0px;">
						<img class="logo" title="网站LOGO" src="images/ITx48.png">
					</div>
					<div class="col-lg-9" style="margin-top: 15vh;padding-left: 5px;">
						<h1>技术网站后台登陆</h1>
					</div>
				</div>
			</div>
			<div id="rightContent">
				<div class="rightcont">
					<form id="form-loginAdmin" class="form-login">
						<div class="row">
							<div class="col-lg-2" style="padding-right: 0px;">
								<img class="logo" title="网站LOGO" src="images/ITx48.png">
							</div>
							<div class="col-lg-6" style="margin:0px;padding: 0px;">
								<h1 style="margin-top:5px;">Sign in</h1>
							</div>
						</div>
						<hr>
						<div class="form-group">
							<label for="usernameInput">用户名</label>
							<input type="text" class="form-control" id="usernameInput" name="usernameInput" placeholder="请输入用户名" required="required">
							<p id="help_username" class="help-block">可使用汉字+数字+字母+下划线,2-10个字符</p>
						</div>
						<div class="form-group">
							<label for="passwordInput">密&ensp;&ensp;码</label>
							<input type="password" class="form-control" id="passwordInput" name="passwordInput" placeholder="请输入密码" required="required">
							<p id="help_password" class="help-block">可使用数字+字母+下划线,5-12个字符</p>
						</div>
						<hr>
						<div class="form-group">
							<button type="button" id="btn_login" class="btn btn-success" style="width: 120px;">登陆</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<script th:inline="javascript">
			$(function() {

				/*为兼容IE使用thymeleaf获取项目路径*/
				// var ctxPath  = [[@{/}]];
				// alert(ctxPath);
				// var ctxPath = /*[[@{/}]]*/'';
				// alert(ctxPath);
				var ctxPath=[[${#httpServletRequest.getContextPath()}]];
				// alert(ctxPath);

				//定义用户名正则
				var patternUsername = /^[A-Za-z0-9_\u4e00-\u9fa5]{2,10}$/;
				var patternPassword = /^[A-Za-z0-9_]{5,12}$/;
				//表单提交前的验证参数
				var usernameInputOK = false;
				var passwordInputOK = false;

				$("#usernameInput").focus().select();
				//监听输入框内容变化
				$("#usernameInput").bind("input propertychange change blur", function(){
					var username = $("#usernameInput").val().trim();
					if (username == "") {
						$("#help_username").text("用户名不能为空");
						$("#help_username").parent().removeClass("has-success").addClass("has-error");
						usernameInputOK = false;
					}else if (patternUsername.test(username)){
						$("#help_username").text("用户名格式正确");
						$("#help_username").parent().removeClass("has-error").addClass("has-success");
						usernameInputOK = true;
					}else{
						$("#help_username").text("可使用汉字+数字+字母+下划线,2-10个字符");
						$("#help_username").parent().removeClass("has-success").addClass("has-error");
						usernameInputOK = false;
					}
				});

				//监听输入框内容变化
				$("#passwordInput").bind("input propertychange change blur", function(){
					var password = $("#passwordInput").val().trim();
					if (password == "") {
						$("#help_password").text("密码不能为空");
						$("#help_password").parent().removeClass("has-success").addClass("has-error");
						passwordInputOK = false;
					}else if (patternPassword.test(password)){
						$("#help_password").text("密码格式正确");
						$("#help_password").parent().removeClass("has-error").addClass("has-success");
						passwordInputOK = true;
					}else{
						$("#help_password").text("可使用数字+字母+下划线,5-12个字符");
						$("#help_password").parent().removeClass("has-success").addClass("has-error");
						passwordInputOK = false;
					}
				});

				// 登陆按钮
				$('#btn_login').on('click',function() {
					var username = $("#usernameInput").val().trim();
					var password = $("#passwordInput").val().trim();
					if (!(usernameInputOK && passwordInputOK)) {
						console.log("表单验证未通过");
						if (!usernameInputOK){
							$("#usernameInput").focus().select();
						}else{
							$("#passwordInput").focus().select();
						}
						return false;
					}
					// 将表单数据封装成json
					var form_loginUser = {
						username: username,
						password: password
					}
					console.log(form_loginUser);
					$.ajax({
						url: 'login/loginAdminCheck',
						type: "POST",
						data: form_loginUser,
						dataType: 'json',
						success: function (msg) {
							console.log(msg);
							if (msg.resCode == 1) {
								alert(msg.resultMsg);
								window.location.href = ctxPath+"/indexAdmin";
							} else {
								alert(msg.resultMsg);
							}
						},
						error: function (e) {
							alert("错误：" + e);
						}
					});
				});

			})
		</script>
	</body>

</html>
